<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8"/>
<title>登录 </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<link rel="shortcut icon" href="<?php echo $this->staticUrl;?>img/favicon.ico" />
<link href="<?php echo $this->staticUrl;?>plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="<?php echo $this->staticUrl;?>plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="<?php echo $this->staticUrl;?>plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<link href="<?php echo $this->staticUrl;?>css/style-metronic.css" rel="stylesheet" type="text/css"/>
<link href="<?php echo $this->staticUrl;?>css/style.css" rel="stylesheet" type="text/css"/>
<link href="<?php echo $this->staticUrl;?>css/style-responsive.css" rel="stylesheet" type="text/css"/>
<link href="<?php echo $this->staticUrl;?>css/pages/login.css" rel="stylesheet" type="text/css"/>
<!-- ==基本JS== -->
<script src="<?php echo $this->staticUrl;?>plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="<?php echo $this->staticUrl;?>plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="<?php echo $this->staticUrl;?>plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="<?php echo $this->staticUrl;?>plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="<?php echo $this->staticUrl;?>plugins/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
<script src="<?php echo $this->staticUrl;?>scripts/core/app.js" type="text/javascript"></script>
<script src="<?php echo $this->staticUrl;?>plugins/jquery.blockui.min.js"></script>
<style type="text/css">
	    #mobile input{width: 60%; display: inline;}
	    #mobile button{padding: 5px 14px; position: relative;top: -3px;}
	    .unicode input {
		    display: inline;
		    width: 60%;
		}
		.unicode img {
		    max-height: 30px;
		}
		img {
		    vertical-align: middle;
		}
		body.login, body.xufei, body.chongzhi {
		    background: #ffffff none repeat scroll 0 0 !important;
		}
			
		.login .content {
		    background: #ffffff none repeat scroll 0 0;
		    border: 1px solid #cccccc;
		    border-radius: 6px;
		    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
		}
		.form-title{text-align:center;}
	</style>
</head>
<body class="login">
<div class="logo">
	<a href="index.html">
<!--		<img src="<?php echo $this->staticUrl;?>img/logo-big.png" alt=""/>-->
	</a>
</div>
<div class="content">
	<form class="login-form" action="" method="post">
		<h3 class="form-title">登录帐号</h3>
		<div class="alert alert-danger display-hide alert_login">
			<button class="close" data-close="alert"></button>
			<span>
				 请输入手机号码、密码和验证码。
			</span>
		</div>
		<div class="form-group">
			<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
			<label class="control-label visible-ie8 visible-ie9">账号</label>
			<div class="input-icon">
				<i class="fa fa-user"></i>
				<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="账号" name="account"/>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label visible-ie8 visible-ie9">密码</label>
			<div class="input-icon">
				<i class="fa fa-lock"></i>
				<input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="密码" name="password" minlength="6" maxlength="15"/>
			</div>
		</div>
		<div class="form-group unicode">
			<label class="control-label visible-ie8 visible-ie9">验证码</label>
			<div class="input-icon">
				<i class="fa fa-check-square-o"></i>
				<input class="form-control placeholder-no-fix" autocomplete="off" placeholder="验证码" name="captcha" type="text"/> <img class="captcha_login" onClick="$('.captcha_login').attr('src', $(this).attr('src')+'?r='+Math.random())" src="<?php echo getUrl('login/captcha');?>" style="cursor:pointer;" title="点击刷新验证码"/>
			</div>
		</div>
		<div class="form-actions" style="text-align:center;">
			<button type="submit" class="btn green pull-center" style="width:250px;">
			登录 <i class="m-icon-swapright m-icon-white"></i>
			</button>
		</div>
<!--		<div class="forget-password">-->
<!--			<h4>忘记密码 ?</h4>-->
<!--			<p>-->
<!--				 不用担心, 请点击-->
<!--				<a href="javascript:;" id="forget-password">-->
<!--					 这里-->
<!--				</a>-->
<!--				 重新设置你的密码。-->
<!--			</p>-->
<!--		</div>-->
	</form>
	<!-- END LOGIN FORM -->
	<!-- BEGIN FORGOT PASSWORD FORM -->
	<form class="forget-form" action="<?php echo site_url('login/forget_verification');?>" method="post">
		<h3>忘记密码 ?</h3>
		<p>请输入你的手机号码和验证码。</p>
		<div class="alert alert-danger display-hide alert_foget">
			<button class="close" data-close="alert"></button>
			<span>&nbsp;</span>
		</div>
		<div class="form-group" id="mobile">
			<div class="input-icon">
				<i class="fa fa-envelope"></i>
				<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="手机号码" name="mobile"/>
				<button type="button" id="send_sms" class="btn"> 获取验证码 </button>
			</div>
		</div>
		<div class="form-group unicode">
			<label class="control-label visible-ie8 visible-ie9">验证码</label>
			<div class="input-icon">
				<i class="fa fa-check-square-o"></i>
				<input class="form-control placeholder-no-fix" placeholder="验证码" name="code" type="text"/>
			</div>
		</div>
		<div class="form-actions">
			<button type="button" id="back-btn" class="btn">
			<i class="m-icon-swapleft"></i> 返回 </button>
			<button type="submit" class="btn green pull-right">
			提交 <i class="m-icon-swapright m-icon-white"></i>
			</button>
		</div>
	</form>
</div>
<div class="copyright">
<!--	 2016 &copy; -->
</div>
<script type="text/javascript">
var Login = function () {
	var handleLogin = function() {
		$('.login-form').validate({
	            errorElement: 'span', 
	            errorClass: 'help-block',
	            focusInvalid: false,
	            rules: {
					account: {
	                    required: true,
	                },
	                password: {
	                    required: true
	                },
	                captcha: {
	                    required: true
	                }
	            },
	            messages: {
	            	mobile: {
	                    required: "账号必填"
	                },
	                password: {
	                    required: "密码必填"
	                },
	                captcha: {
	                    required: "验证码必填"
	                }
	            },
	            invalidHandler: function (event, validator) { //display error alert on form submit   
	                $('.alert-danger', $('.login-form')).show();
	            },
	            highlight: function (element) { // hightlight error inputs
	                $(element)
	                    .closest('.form-group').addClass('has-error'); // set error class to the control group
	            },
	            success: function (label) {
	                label.closest('.form-group').removeClass('has-error');
	                label.remove();
	            },
	            errorPlacement: function (error, element) {
	                error.insertAfter(element.closest('.input-icon'));
	            },
	            submitHandler: function (form) {
	            	var msgBox = $('.alert_login');
	            	var formObj = $(form);
	            	msgBox.hide();
	            	formObj.find('[type="submit"]').attr("disabled", true);
	            	formObj.ajaxSubmit({
	        			datatype : "json",
	        		    success:function(html,status){                        
	        		    	var data = jQuery.parseJSON(html);
	        		    	if(data.status){
   								window.location.href = data.url;
   							}
   							else{
   	   							if(data.message){
	   	   							msgBox.find('span').html(data.message);
	   	   							msgBox.show();
   	   							}else if(data.form_error){
									for(var k in  data.form_error){

										var obj = formObj.find('[name="'+k+'"]');
										if(obj.parents('.form-group').find('.help-block').length){
											obj.parents('.form-group').find('.help-block').html(data.form_error[k]);
										}else{
											obj.parents('.form-group').append('<span for="'+k+'" class="help-block">'+data.form_error[k]+'</span>');
										}
										
										obj.parents('.form-group').addClass('has-error');
									}
   	   	   						}
   								$(form).find('[type="submit"]').attr("disabled", false);
                                $('.captcha_login').click();
   							}
	        		    }
	        		 });
	            }
	        });

	        $('.login-form input').keypress(function (e) {
	            if (e.which == 13) {
	                if ($('.login-form').validate().form()) {
	                    $('.login-form').submit(); //form validation success, call ajax form submit
	                }
	                return false;
	            }
	        });
	}

    return {
        init: function () {
            handleLogin();
            handleCode();
            handleForgetPassword();
        }
    };
}();
</script>
<script type="text/javascript">
		$(document).ready(function() {     
		  App.init();
		  Login.init();
		});
	</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>